
<template>
  <div>
    <div class="sidebar">
      <!-- 标题 -->
      <div class="title">
        <h3>网站导航</h3>
      </div>
      <!-- 内容 -->
      <div class="sidebarcon">
        <a
          v-for="item in tzgg"
          :class="isActive==item.url?'isActive':''"
          @click="goRoute(item.url)"
        >{{item.value}}</a>
      </div>
    </div>
    <Ewm></Ewm>
  </div>
</template>

<script>
import Ewm from "@/components/ewm.vue";

export default {
  components: {
    Ewm,
  },
  data() {
    return {
      isActive: "",
      tzgg: [
        { value: "首页", url: "home" },
        { value: "名医风采", url: "famousdoctor" },
        { value: "工作室介绍", url: "studioIntro" },
        { value: "论文著作", url: "thesis" },
        { value: "临床医案", url: "medicalrecord" },
        { value: "视频资料", url: "videoMaterial" },
        { value: "传承之路", url: "heritageroad" },
        { value: "最新动态", url: "newActivity" },
        { value: "通知公告", url: "notice" },
        { value: "荣誉证书", url: "awards" },
        { value: "名医工作站", url: "medicalwork" },

      ],
    };
  },
  created() {
    this.isActive = this.$route.path.slice(1);
  },
  methods: {
    goRoute(name) {
      this.isActive = name;
      this.$router.push({
        path: "/" + name,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.sidebar {
  width: 120px;
  // min-width: 160px;
  border: 0.5px solid #ebe4d9;
  border-top: none;
  // height: 300px;
  // margin-top: 20px;
  // margin-bottom: 20px;
  .sidebarcon {
    padding: 0px 10px;
    box-sizing: border-box;
    overflow-y: hidden;
    a {
      cursor: pointer;
      display: block;
      width: 100%;
      height: 36px;
      line-height:36px;
      font-size:14px;
      font-weight: 500;
      color: #2c3e50;
      border-bottom: 1px dotted #eaeaea;
    }
    a:before {
      display: inline-block;
      content: "●"; //'\25CF'
      padding-right: 10px;
      color: #7b4224;
      font-size: 6px;
      line-height: 36px;
    }
    a:last-child {
      border-bottom: none;
    }
    a:hover {
      color: red;
    }
    // 动态class
    .isActive {
      color: red;
    }
  }
}
</style>